window.onload = function () {
    var inputData = [];
    function initCharts (data,key){
        $.ajax({
            type: "POST",
            url: "/analyze/loanAgeDate",
            data:data,
            success: function (msg){
                var myChart = echarts.init($('#myChart4').get(0));
                var allData = msg.result,
                    quantity = [],
                    price = [],
                    loansBalance = [],
                    ltvData = [],
                    subsection = [];

                var result;
                allData.sort(function(a, b) {
                    return a.ordernumber-b.ordernumber;
                });
                allData.forEach(function(data,index){
                    // quantity[index] = data.COUNT;
                    // price[index] = transitiony(data.LOANSAMOUNT);
                    // loansBalance[index] = transitiony(data.LOANSBALANCE);
                    // subsection[index] = data.SUBSECTION;
                    quantity[index] = data.count;
                    price[index] = transitiony(data.loansamount);
                    loansBalance[index] = transitiony(data.loansbalance);
                    subsection[index] = data.subsection;
                    ltvData[index] = data.ltv;

                });

                function initdata(quantity,subsection){
                    var listArr =  [];
                    for(var i = 0; i < quantity.length; i++){
                        listArr.push({value:quantity[i],name:subsection[i]})
                    }
                    return listArr
                }

                option4 = {
                    tooltip : {
                        trigger: 'item'
                    },
                    title: [{
                        subtext: '押品数量',
                        left: '1%',
                        top: '3%',
                        textStyle: {
                            color: '#333'
                        }
                    }, {
                        subtext: '',
                        left: '83%',
                        top: '6%',
                        textAlign: 'center',
                        textStyle: {
                            color: '#ff733f'
                        }
                    }],
                    grid: {
                        left: '1%',
                        right: '35%',
                        top: '16%',
                        bottom: '6%',
                        containLabel: true
                    },
                    yAxis:  {
                        type: 'value',
                        axisLine:{
                            lineStyle:{
                                color:'#ADADAD',
                            }
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data : subsection,
                        axisLine:{
                            lineStyle:{
                                color:'#ADADAD',
                            }
                        },
                    },
                    series: [
                        {
                            name:'数量',
                            type:'bar',
                            data:quantity,
                            tooltip : {
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                        ];
                                        return colorList[params.dataIndex]
                                    },label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{c}'
                                    }
                                }
                            }
                        },
                        {
                            type: 'pie',
                            center: ['83%', '53%'],
                            radius : '40%',

                            data:[],
                            tooltip : {
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        var colorList = [
                                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                        ];
                                        return colorList[params.dataIndex]
                                    },
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{b}'
                                    }
                                }
                            }
                        }



                    ]
                };

                if(key==1){
                    result = quantity;
                    option4.series[0].data=initdata(result,subsection);
                    option4.series[1].data=initdata(result,subsection);
                    option4.series[0].name='押品数量';
                    option4.series[1].name='押品数量';
                    option4.title[0].subtext="押品数量（笔）"
                }else if(key==2){
                    result = price;
                    option4.series[0].data=initdata(result,subsection);
                    option4.series[1].data=initdata(result,subsection);
                    option4.series[1].name='贷款金额';
                    option4.title[0].subtext="贷款金额（亿元）"
                }else if(key==3){
                    result = loansBalance;
                    option4.series[0].data=initdata(result,subsection);
                    option4.series[1].data=initdata(result,subsection);
                    option4.series[1].name='贷款金额';
                    option4.title[0].subtext="贷款余额（亿元）"
                }else if(key==4){
                    result = ltvData;
                    option4.series[0].data=initdata(result,subsection);
                    option4.series[1].data=initdata(result,subsection);
                    option4.series[0].name='动态抵押率';
                    option4.series[1].name='动态抵押率';
                    option4.title[0].subtext="动态抵押率（%）"
                }
                myChart.setOption(option4);
                window.onresize = function () {
                    myChart.resize()
                };
            }
        })};
    initCharts(inputData,1);
    $('#searchData').click(function(){
        // $('#one').siblings().removeClass('active');
        // $('#one').addClass('active');
        citys = $('#city').val(),
            districts = $('#district').val(),
            loansBalanceStarts = $('#loansBalanceStart').val(),
            loansBalanceEnds =  $('#loansBalanceEnd').val(),
            loansAmountStarts = $('#loansAmountStart').val(),
            loansAmountEnds = $('#loansAmountEnd').val(),
            startDateStarts = $('#startDateStart').val(),
            startDateEnds = $('#startDateEnd').val(),
            loansDurations = $('#loansDuration').val(),
            remainTimes = $('#remainTime').val(),
            risk = $('#risk').val(),
            buildAreaEnds = $('#buildAreaEnd').val(),
            buildAreaStarts = $('#buildAreaStart').val(),
            endDateStarts = $('#endDateStart').val(),
            endDateEnds = $('#endDateEnd').val(),
            inputData = {
                city:citys,
                district:districts,
                loansBalanceStart:loansBalanceStarts,
                loansBalanceEnd:loansBalanceEnds,
                loansAmountStart:loansAmountStarts,
                loansAmountEnd:loansAmountEnds,
                startDateStart:startDateStarts,
                startDateEnd:startDateEnds,
                loansDuration:loansDurations,
                remainTime:remainTimes,
                risk:risk,
                buildAreaEnd:buildAreaEnds,
                buildAreaStart:buildAreaStarts,
                endDateStart:endDateStarts,
                endDateEnd:endDateEnds
            };
        if($("#one").hasClass("active")){
            initCharts(inputData,1)
        }else if($('#two').hasClass("active")){
            initCharts(inputData,2)
        }else if($('#three').hasClass("active")){
            initCharts(inputData,3)
        }else if($('#four').hasClass("active")){
            initCharts(inputData,4)
        };
    });
    $('#one').click(function(){
        initCharts(inputData,1);
    });
    $('#two').click(function(){
        initCharts(inputData,2);
    });
    $('#three').click(function(){
        initCharts(inputData,3);
    });
    $('#four').click(function(){
        initCharts(inputData,4);
    });



    /*var myChart4 = echarts.init($('#myChart4').get(0));
    option4 = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        title: [{
            text: '最活跃会话分析',
            left: '1%',
            top: '6%',
            textStyle: {
                color: '#ff733f'
            }
        }, {
            text: '最活跃会话占比',
            left: '83%',
            top: '6%',
            textAlign: 'center',
            textStyle: {
                color: '#ff733f'
            }
        }],
        legend: {


            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        },
        grid: {
            left: '1%',
            right: '35%',
            top: '16%',
            bottom: '6%',
            containLabel: true
        },
        yAxis:  {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        },
        series: [
            {
                name:'蒸发量',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }
                    }
                }
            },
            {
                type: 'pie',
                center: ['83%', '53%'],
                radius: ['25%', '39%'],

                data:[
                    {value:335, name:'1月'},
                    {value:310, name:'2月'},
                    {value:335, name:'3月'},
                    {value:335, name:'4月'},
                    {value:335, name:'5月'},
                    {value:335, name:'6月'},
                    {value:335, name:'7月'},
                    {value:335, name:'8月'},
                    {value:335, name:'9月'},
                    {value:335, name:'10月'},
                    {value:335, name:'11月'},
                    {value:335, name:'12月'},

                ]
            },



        ]
    };
    myChart4.setOption(option4);
    window.onresize = function () {
        myChart4.resize()
    };*/

    /*    var myChart5 = echarts.init($('#myChart5').get(0));
        option5 = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            title: [{
                text: '最活跃会话分析',
                left: '1%',
                top: '6%',
                textStyle: {
                    color: '#ff733f'
                }
            }, {
                text: '最活跃会话占比',
                left: '83%',
                top: '6%',
                textAlign: 'center',
                textStyle: {
                    color: '#ff733f'
                }
            }],
            legend: {


                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            grid: {
                left: '1%',
                right: '35%',
                top: '16%',
                bottom: '6%',
                containLabel: true
            },
            yAxis:  {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            series: [
                {
                    name:'蒸发量',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            },label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}'
                            }
                        }
                    }
                },
                {
                    type: 'pie',
                    center: ['83%', '53%'],
                    radius: ['25%', '39%'],

                    data:[
                        {value:335, name:'1月'},
                        {value:310, name:'2月'},
                        {value:335, name:'3月'},
                        {value:335, name:'4月'},
                        {value:335, name:'5月'},
                        {value:335, name:'6月'},
                        {value:335, name:'7月'},
                        {value:335, name:'8月'},
                        {value:335, name:'9月'},
                        {value:335, name:'10月'},
                        {value:335, name:'11月'},
                        {value:335, name:'12月'},

                    ]
                },



            ]
        };
        myChart5.setOption(option5);
        window.onresize = function () {
            myChart5.resize()
        };

        var myChart6 = echarts.init($('#myChart6').get(0));
        option6 = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            title: [{
                text: '最活跃会话分析',
                left: '1%',
                top: '6%',
                textStyle: {
                    color: '#ff733f'
                }
            }, {
                text: '最活跃会话占比',
                left: '83%',
                top: '6%',
                textAlign: 'center',
                textStyle: {
                    color: '#ff733f'
                }
            }],
            legend: {


                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            grid: {
                left: '1%',
                right: '35%',
                top: '16%',
                bottom: '6%',
                containLabel: true
            },
            yAxis:  {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            series: [
                {
                    name:'蒸发量',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            },label: {
                                show: true,
                                position: 'top',
                                formatter: '{b}\n{c}'
                            }
                        }
                    }
                },
                {
                    type: 'pie',
                    center: ['83%', '53%'],
                    radius: ['25%', '39%'],

                    data:[
                        {value:335, name:'1月'},
                        {value:310, name:'2月'},
                        {value:335, name:'3月'},
                        {value:335, name:'4月'},
                        {value:335, name:'5月'},
                        {value:335, name:'6月'},
                        {value:335, name:'7月'},
                        {value:335, name:'8月'},
                        {value:335, name:'9月'},
                        {value:335, name:'10月'},
                        {value:335, name:'11月'},
                        {value:335, name:'12月'},

                    ]
                },



            ]
        };
        myChart6.setOption(option6);
        window.onresize = function () {
            myChart6.resize()
        };*/
}